<template>
  <div class="wrapper">
    <vHeader></vHeader>
    <vSidebar></vSidebar>
    <div class="content-box" :class="{'content-collapse':collapse}" style="background-color:transparent">
      <div class="content" style="background-color:transparent">
        <transition name="move" mode="out-in" style="background-color:transparent">
          <keep-alive :include="tagsList" style="background-color:transparent">
            <router-view style="background-color:transparent;height: 100%"></router-view>
          </keep-alive>
        </transition>
        <el-backtop target=".content" style="background-color:transparent"></el-backtop>
      </div>
    </div>
  </div>
</template>
<script>
import vHeader from './Header.vue'
import vSidebar from './Sidebar.vue'
// import vTags from './Tags.vue'
import bus from './bus'
export default {
  data () {
    return {
      tagsList: [],
      collapse: false
    }
  },
  components: {
    vHeader,
    vSidebar
    // vTags
  },
  created () {
    bus.$on('collapse-content', msg => {
      this.collapse = msg
    })

    // 只有在标签页列表里的页面才使用keep - alive，即关闭标签之后就不保存到内存中了。
    bus.$on('tags', msg => {
      const arr = []
      for (let i = 0, len = msg.length; i < len; i++) {
        msg[i].name && arr.push(msg[i].name)
      }
      this.tagsList = arr
    })
  }
}
</script>
<style scoped>
/* .content-box {
  background-image: url(../image/bg_home.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 100%;
} */
.content-box {
  padding: 0;
}
.content {
  padding: 0;
}
</style>
